<style>
  .layui-input-inline{margin-top:10px;}
  .xxpayPopupDiv .layui-form-label {
     width:15% !important;
     margin-left:1%;
  }
  .xxpayPopupDiv .layui-input-inline {
     width: 33% !important;
  }
</style>
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>订单管理</cite></a>
    <a><cite>补单列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">补单列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right; margin-bottom: 10px;">
              <div id="timeDiv" class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="payOrderId" id="payOrderId" placeholder="支付订单号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="operateUserId" id="operateUserId" placeholder="操作人ID" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <select name="type" id="resendType" placeholder="补单类型" lay-search="">
                    <option value="-99">补单类型</option>
                    <option value="1">支付订单</option>
                    <option value="2">代付订单</option>
                  </select>
                </div>
                  <a id="search" style="margin-top: 10px" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
              </div>
            </div>
          </div>
          <table id="XxPay_Mgr_ResendRecord_dataAll" lay-filter="XxPay_Mgr_ResendRecord_dataAll"></table>
        </div>

      </div>
    </div>
  </div>
</div>

<script>
layui.use(['admin', 'table', 'util', 'timePick'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element
  ,form = layui.form
  ,view = layui.view
  ,timePick = layui.timePick;

  timePick.init();  //第一个参数表示开始时间   第二个表示结束时间   0,0今天   -1,-1昨天   -7,0近一周   以此类推
  element.render('breadcrumb', 'breadcrumb');

  var beforeState = function(d){
    if(d.beforeState == 0) {
      return "<span style='color: blue'>订单生成</span>";
    }else if(d.beforeState == 1) {
      return "<span style='color: orangered'>支付中</span>";
    }else if(d.beforeState == 2) {
      return "<span style='color: green'>支付成功</span>";
    }else if(d.beforeState == -1) {
      return "<span style='color: red'>支付失败</span>";
    }else if(d.beforeState == 3) {
      return "<span style='color: darkgreen'>处理完成</span>";
    }else if(d.beforeState == 4) {
      return "<span style='color: red'>已退款</span>";
    }else if(d.beforeState == -2) {
        return "<span style='color: red'>订单已关闭</span>";
    }
  };

  var afterState = function(d){
    if(d.afterState == 0) {
      return "<span style='color: blue'>订单生成</span>";
    }else if(d.afterState == 1) {
      return "<span style='color: orangered'>支付中</span>";
    }else if(d.afterState == 2) {
      return "<span style='color: green'>支付成功</span>";
    }else if(d.afterState == -1) {
      return "<span style='color: red'>支付失败</span>";
    }else if(d.afterState == 3) {
      return "<span style='color: darkgreen'>处理完成</span>";
    }else if(d.afterState == 4) {
      return "<span style='color: red'>已退款</span>";
    }else if(d.afterState == -2) {
        return "<span style='color: red'>订单已关闭</span>";
    }
  };

    // 初始化统计结果
    var createTimeStart = $('#createTimeStart').val();
    var createTimeEnd = $('#createTimeEnd').val();

  //用户列表
  table.render({
    elem: '#XxPay_Mgr_ResendRecord_dataAll'
    ,url: layui.setter.baseUrl + '/resend_record/list' // 补单列表接口
    ,where: {
        access_token: layui.data(layui.setter.tableName).access_token,
        createTimeStart: createTimeStart,
        createTimeEnd: createTimeEnd
    }
    ,id: 'tableReload'
    ,page: true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'payOrderId', title: '支付单号'}
      ,{field: 'amount', title: '金额', templet: '<div>{{ d.amount/100 }}</div>'}
      ,{field: 'resendType', title: '补单类型', templet: '<div>{{ d.resendType == 1 ? "支付订单" : d.resendType == 2 ? "代付订单" : ""}}</div>'}
      ,{field: 'beforeState', title: '补单前状态', templet: beforeState}
      ,{field: 'afterState', title: '补单后状态', templet: afterState}
      ,{title: '系统', templet: '<span>{{ d.operateUserBelongSystem == 1?"运营平台":d.operateUserBelongSystem == 2?"商户系统": d.operateUserBelongSystem == 3?"代理商系统":"" }}</span>'}
      ,{field: 'operateUserName', title: '操作人'}
      ,{field: 'remark', title: '备注'}
      ,{field: 'createTime', width: 200, title: '补单时间', templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
    ]]
    ,skin: 'line'
  });

  // 搜索
  var $ = layui.$, active = {
    reload: function(){
      var createTimeStart = $('#createTimeStart').val();
      var createTimeEnd = $('#createTimeEnd').val();
      var operateUserId = $('#operateUserId').val();
      var resendType = $('#resendType').val();
      var payOrderId = $('#payOrderId').val();

      //执行重载
      table.reload('tableReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          payOrderId: payOrderId,
          operateUserId: operateUserId,
          resendType: resendType,
          createTimeStart : createTimeStart,
          createTimeEnd : createTimeEnd
        }
      });
    }
  };

  $('#search').on('click', function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  // 渲染表单
  form.render();
});
</script>